
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />

<title>演示 - jQuery EasyUI 1.5.x Of Insdep theme examples</title>
<!--
    JQuery EasyUI 1.5.x of Insdep Theme 1.0.0
    演示地址：https://www.insdep.com/example/
    下载地址：https://www.insdep.com
    问答地址：https://bbs.insdep.com

    项目地址：http://git.oschina.net/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme

    QQ交流群：184075694 （优先发布更新主题及内测包）
-->
<!--
    注意样式表优先级
    主题样式必须在easyui组件样式后。
-->

<link href="../../themes/insdep/easyui.css" rel="stylesheet" type="text/css">


<!--
    themes/insdep/easyui_animation.css
    Insdep对easyui的额外增加的动画效果样式，根据需求引入或不引入，此样式不会对easyui产生影响
-->
<link href="../../themes/insdep/easyui_animation.css" rel="stylesheet" type="text/css">

<!--
    themes/insdep/easyui_plus.css
    Insdep对easyui的额外增强样式,内涵所有 insdep_xxx.css 的所有组件样式
    根据需求可单独引入insdep_xxx.css或不引入，此样式不会对easyui产生影响
-->
<link href="../../themes/insdep/easyui_plus.css" rel="stylesheet" type="text/css">

<!--
    themes/insdep/insdep_theme_default.css
    Insdep官方默认主题样式,更新需要自行引入，此样式不会对easyui产生影响
-->
<link href="../../themes/insdep/insdep_theme_default.css" rel="stylesheet" type="text/css">

<!--
    themes/insdep/icon.css
    美化过的easyui官方icons样式，根据需要自行引入
-->
<link href="../../themes/insdep/icon.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../themes/insdep/jquery.insdep-extend.min.js"></script>
<script type="text/javascript" src="../../js/starter.js"></script>
<style type="text/css">
    .layout-panel-west{ border-right: 1px solid #c5c5c5; }
</style>
<script>
    $(function(){
        /*布局部分*/
        $('#master-layout').layout({
                fit:true/*布局框架全屏*/
        });   
    });
</script>
</head>

<body>
	<div id="master-layout">
     
        <div data-options="region:'east',split:true,border:false" title="组织数" style="width:200px; padding:10px 20px;">

      <ul class="easyui-tree"> 
            <li>   
                <span>集团</span>
                <ul>
                    <li data-options="state:'closed'">
                        <span>分公司一</span>
                        <ul>
                            <li><span><a href="#">孙子公司</a></span>
                            </li>
                            <li><span><a href="#">孙子公司</a></span>
                            </li>
                            <li><span><a href="#">孙子公司</a></span>
                            </li>
                        </ul>
                    </li> 
                     <li data-options="state:'closed'">
                        <span>分公司一</span>
                        <ul>
                            <li><span><a href="#">孙子公司</a></span>
                            </li>
                        </ul>
                    </li> 
                     <li data-options="state:'closed'">
                        <span>分公司一</span>
                        <ul>
                            <li><span><a href="#">孙子公司</a></span>
                            </li>
                        </ul>
                    </li>   
                </ul>   
            </li>   
         </ul>  

        </div>

        <div class="easyui-layout" data-options="region:'center',border:false" title="系统管理>用户查询" style="height:630px">

        <div data-options="region:'north'" style="height:50px">
            
        <div style="margin-bottom:20px">
            
            <input class="easyui-searchbox theme-textbox-radius" data-options="prompt:'Please Input Value',menu:'#mm1111',searcher:doSearch" style="width:300px"></input>
           
            <input class="easyui-searchbox theme-textbox-radius" data-options="prompt:'Please Input Value',menu:'#mm1112',searcher:doSearch" style="width:300px"></input>
             <div id="mm1111">
                <div data-options="name:'all',iconCls:'icon-ok'">名称</div>
                <div data-options="name:'sports'">账号</div>
            </div>
             <div id="mm1112">
                <div data-options="name:'all',iconCls:'icon-ok'">名称</div>
                <div data-options="name:'sports'">账号</div>
            </div>
            <script>
                function doSearch(value,name){
                    alert('You input: ' + value+'('+name+')');
                }
            </script>
            <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:80px">Search</a>
        </div>

        </div>
       
        <div data-options="region:'center'" style="height:530px">
           
    
        <table id="dg" class="easyui-datagrid" style="width:100%;height:250px"
                data-options="rownumbers:true,singleSelect:false,url:'user.json',method:'get'">
            <thead>
                <tr>
                    <th data-options="field:'ck',checkbox:true"></th>
                    <th data-options="field:'itemid',width:80">Item ID</th>
                    <th data-options="field:'productid',width:100">Product</th>
                    <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                    <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                    <th data-options="field:'attr1',width:220">Attribute</th>
                    <th data-options="field:'status',width:60,align:'center'">Status</th>
                </tr>
            </thead>
        </table>
  
        </div>
             
        </div>
    </div>





   
   
</body>
</html>
